<template>
	<view class="container">
		<view class="container-order-list">
			<block v-for="(item, index) in goods" :key="index">
				<view class="orderDetail-item">
					<view class="orderDetail-item-img">
						<image :src="item.thumbnail" mode="aspectFit|aspectFill|widthFix" lazy-load="true" />
					</view>
					<view class="orderDetail-item-text">
						<view>{{ item.name }}</view>
					</view>
					<view class="orderDetail-item-price">
						<view>￥<text>{{ item.realityPrice }}</text></view>
						<text>×{{ item.number }}</text>
					</view>
				</view>
				<view class="order-actual-payment">
					实付款￥<text>{{ item.realityPrice }}</text>
				</view>
			</block>
			<view class="order-all">
				<view>
					<view>运费：</view>
					<view>￥<text>{{ freight }}</text></view>
				</view>
				<view>
					<view>订单合计：</view>
					<view>￥<text>{{ totalPrice }}</text></view>
				</view>
				<view v-if="remark">
					<view>备注：</view>
					<view>{{ remark  }}</view>
				</view>
			</view>
		</view>
		<view class="container-reason">
			<view class="title refund-instructions">
				<view>
					退货说明<text>*</text>
				</view>
				<u-icon size="25rpx" color="#999999" :name="visiable ? 'arrow-up' : 'arrow-down'" @click="onReasonShow" />
			</view>
			<block v-if="orderType == 0">
				<view class="container-box" v-if="visiable">
					<view class="container-box-title">个人原因</view>
					<block v-for="(item, index) in reasonList.selfReason" :key="index">
						<view class="reason-item">
							<view>{{ item.text }}</view>
							<u-icon size="40rpx" :color="item.id == reasonCheck ? '#32B499' : '#BBBBBB'"
								:name="item.id == reasonCheck ? '/static/icon/checkAct.png' : '/static/icon/check.png'"
								@click="checkReason(item)" />
						</view>
					</block>
					<view class="container-box-title">门店原因</view>
					<block v-for="(item, index) in reasonList.businessReason" :key="index">
						<view class="reason-item">
							<view>{{ item.text }}</view>
							<u-icon size="40rpx" :color="item.id == reasonCheck ? '#32B499' : '#BBBBBB'"
								:name="item.id == reasonCheck ? '/static/icon/checkAct.png' : '/static/icon/check.png'" class="check"
								@click="checkReason(item)" />
						</view>
					</block>
				</view>
			</block>

			<block v-else>
				<view class="container-box" v-if="visiable">
					<view class="container-box-title">门店原因</view>
					<block v-for="(item, index) in reasonList.storeBusinessReason" :key="index">
						<view class="reason-item">
							<view>{{ item.text }}</view>
							<u-icon size="40rpx" :color="item.id == reasonCheck ? '#32B499' : '#BBBBBB'"
								:name="item.id == reasonCheck ? '/static/icon/checkAct.png' : '/static/icon/check.png'" class="check"
								@click="checkReason(item)" />
						</view>
					</block>
				</view>
			</block>

		</view>
	 <view style="height: 200rpx;">
	 	
	 </view>
	
		<view class="footer_btn">
			<view class="submit-btn">
				<block v-if="status == 0">
					<view @click="onOrderRefund">提交</view>
				</block>
				<block v-else="status == 2">
					<view @click="onApplyRefund">提交</view>
				</block>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderDetail: {},
				goods: [],
				visiable: true,
				reasonList: {
					selfReason: [{
							id: 0,
							text: '临时有事无法收货'
						},
						{
							id: 1,
							text: '电话/地址填写错误'
						},
						{
							id: 2,
							text: '忘记使用或者选错优惠券'
						},
						{
							id: 3,
							text: '备注信息忘记填或者填错'
						},
						{
							id: 4,
							text: '没错/买多/漏买/暂不需要商品'
						},
					],
					businessReason: [{
							id: 5,
							text: '店员通知我缺货'
						},
						{
							id: 6,
							text: '店员沟通态度差'
						},
						{
							id: 7,
							text: '其它'
						},
					],
					storeBusinessReason: [{
							id: 0,
							text: '店员通知我缺货'
						},
						{
							id: 1,
							text: '店员沟通态度差'
						},
						{
							id: 2,
							text: '临时有事无法到店取货'
						},
						{
							id: 3,
							text: '忘记使用或者选错优惠券'
						},
						{
							id: 4,
							text: '没错/买多/漏买/暂不需要商品'
						},
					],
				},
				reasonCheck: -1,
				cancelReason: '',
				orderId: '',
				status: '', //0 待发货直接退款  2 已到货退款退货
				orderType: 0, //0 平台订单  1 社区店订单
				totalPrice: '',
				freight: '',
				remark: '',
			}
		},
		onLoad(option) {
			const {
				orderId,
				status,
				orderType
			} = option;
			this.orderId = orderId
			this.orderType = orderType
			this.status = status
			this.init()
		},
		methods: {
			async init() {
				let {
					orderId
				} = this
				let result = await this.$request.miniOrderDetail({
					orderId
				})
				this.goods = result.data.orderProductDTOList
				this.totalPrice = result.data.realityPrice
				this.freight = result.data.freight
				this.remark = result.data.remark
			},
			onReasonShow() {
				this.visiable = !this.visiable
			},

			checkReason(item) {
				this.reasonCheck = item.id
				this.cancelReason = item.text
			},

			//待发货直接退款
			onOrderRefund() {
				const {
					cancelReason,
					orderId
				} = this;
				if (cancelReason == '') {
					this.$toast('请选择退货原因');
					return;
				} else {
					const param = {
						orderId
					}
					this.$request.miniOrderRefund(param).then(res => {
						if (res.msg == '成功') {
							this.$toast('退款成功');
							setTimeout(() => {
								this.$goPath(1)
							}, 500);
						}
					});
				}
			},
			//已到货退款退货
			onApplyRefund() {
				const {
					cancelReason,
					orderId
				} = this;
				if (cancelReason == '') {
					this.$toast('请选择退货原因');
					return;
				} else {
					const param = {
						orderId,
						cancelReason
					}
					this.$request.miniApplyRefund(param).then(res => {
						if (res.msg == '成功') {
							this.$toast('申请退货成功，请耐心等待平台审批');
							setTimeout(() => {
								this.$goPath(1)
							}, 500);
						}
					});
				}
			},
		},
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 24rpx;
		padding-bottom: 0;
		background-color: #F6F6F6;
	}

	.container-order-list {
		background-color: #fff;
		padding: 24rpx;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.orderDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
		color: #999999;
		font-size: 25rpx;
		padding-top: 10rpx;
	}

	.orderDetail-item-img {
		width: 128rpx;
		height: 128rpx;
	}

	.orderDetail-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx 10rpx;
		display: block;
	}

	.orderDetail-item-text {
		width: 372rpx;
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}

	.orderDetail-item-text>view:first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
	}

	.orderDetail-item-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.orderDetail-item-price>view {
		color: #333;
	}

	.orderDetail-item-price>view>text {
		font-size: 32rpx;
	}

	.orderDetail-item-price>text {
		font-size: 24rpx;
	}

	.order-actual-payment {
		text-align: right;
		font-size: 24rpx;
		color: #333333;
		margin: 24rpx 0;
		margin-bottom: 0;
	}

	.order-actual-payment text {
		font-size: 28rpx;
		font-weight: bold;
		color: #EA5F5F;
	}

	.container-reason {
		background-color: #fff;
		padding: 24rpx;
		box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 24rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.title text {
		color: #EA5F5F;
	}

	.textarea-container .textarea {
		height: 20vh;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: normal;
		border: 2rpx solid rgba(153, 153, 153, 0.6);
		padding: 24rpx;
		padding-bottom: 10rpx;
		background-color: #fff;
	}

	.t-textarea__indicator:not(:empty) {
		padding-top: 0 !important;
	}

	.footer_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 12rpx 0;
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn>view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 500rpx;
		height: 70rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #32B499;
		border-radius: 40rpx;
	}

	.refund-instructions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.container-box {
		padding: 24rpx;
		height: 100%;
		background-color: #fff;
	}

	.box-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.container-box-title {
		margin-bottom: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}

	.reason-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.order-all {
		border-top: 1rpx solid rgba(241, 241, 241, 0.8);
		padding: 24rpx 0 0;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
		margin-top: 24rpx;
	}

	.order-all>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.order-all>view>view:last-child {
		color: #EA5F5F;
		font-weight: bold;
	}

	.order-all>view>view:last-child>text {
		font-size: 36rpx;
	}
</style>